---
id: tiles
title: Tiles
---

import { Props, BoxProps } from '../../core/components';

`Tiles` renders a grid of components with equal spacing between them.

### Columns & Space

```jsx live
const App = () => {
  return (
    <Tiles space={4} columns={3}>
      <Placeholder />
      <Placeholder />
      <Placeholder />
      <Placeholder />
      <Placeholder />
    </Tiles>
  )
}

render(<App />)
```

### Empty

```jsx live
const App = () => {
  return (
    <Tiles space={4} columns={3} empty={false}>
      <Placeholder />
      <Placeholder />
      <Placeholder />
      <Placeholder />
      <Placeholder />
    </Tiles>
  )
}

render(<App />)
```

### Nested

```jsx live
const styles = StyleSheet.create({
  fluidPlaceholder: {
    backgroundColor: 'rgba(255, 0, 255, 0.05)',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'rgba(255, 0, 255, 0.3)',
  },
})

const FluidPlaceholder = () => {
  return (
    <Box flex="fluid" style={styles.fluidPlaceholder} />
  )
}

const App = () => {
  return (
    <Tiles space={4} columns={2}>
      <FluidPlaceholder />
      <Tiles space={4} columns={2}>
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </Tiles>
      <Placeholder />
      <Placeholder />
    </Tiles>
  )
}

render(<App />)
```

## Props

:::info

`Tiles` accepts all [`View`](https://reactnative.dev/docs/view) props.

:::

<Props
  data={[
    {
      name: 'columns',
      type: 'responsiveProp<int>',
      required: false,
    },
    {
      name: 'space',
      type: 'responsiveProp<float>',
      required: false,
    },
    {
      name: 'empty',
      type: 'responsiveProp<bool>',
      required: false,
      defaultValue: 'true',
    },
  ]} />

<BoxProps />
